<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">

<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css"> 
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<style>
.el-select .el-input {
	width: 110px;
}

.el-table .info-row {
	background: #c9e5f5;
}
text.highcharts-credits{
	display: none;
</style>
</head>


<body class="fixed-center" style="height: 1000px;">
	<!-- ============================================================== -->
	<!-- 右侧主体内容开始-->
	<!-- ============================================================== -->
	<div class="content-page crm" style="margin: 0; padding: 0;">
		<div class="content" style="margin: 0; padding: 0;">
			<div class="container-fluid" style="min-height: 900px;">
				<div class="row">
					<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm">

						<!----------------筛选、查询input代码开始-------------------->
						<div id="search">
							<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">


								<el-input placeholder="输入主题" v-model="ruleForm.input"
									class="input-with-select"> 
									<el-select
									v-model="ruleForm.selects" slot="prepend" clearable
									placeholder="全部数据"> 
									
									<!-- 服务类型 -->
									 <el-option label="答疑" value="406"></el-option> 
									 <el-option label="故障排除" value="407"></el-option>
								     <el-option label="升级" value="408"></el-option> 
								     <el-option label="其他" value="409"></el-option>
								     
								     <!-- 服务方式 -->
								     <el-option label="电话" value="411"></el-option> 
									 <el-option label="传真" value="410"></el-option>
								     <el-option label="上门" value="412"></el-option> 
								     <el-option label="邮寄" value="413"></el-option>
								     
								     <!-- 服务状态 -->
								      <el-option label="无需处理" value="415"></el-option> 
									 <el-option label="未处理" value="416"></el-option>
								     <el-option label="处理中" value="417"></el-option> 
								     <el-option label="处理完成" value="418"></el-option>

								     </el-select>
								       <el-button slot="append"	icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>

								</el-input>
							</div>
						</div>
						<!----------------列表-------------------->
						<div id="qlist">
							<div class="row m-t-15 f-s-12" style="height: 35px;">
								<div class="col-sm-6"></div>
								<div class="col-sm-6 text-right" id="boxcreate">
								
									<el-button class="btn btn-white waves-effect waves-light"
										type="text" @click="centerDialogVisible = true"> <i
										class="fa fa-plus-circle m-r-5">新建</i> </el-button>
										
									<el-dialog title="售后服务" :visible.sync="centerDialogVisible"
										width="800px" center>
										 <iframe src="/servicety2"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth">
									</iframe> 
									</el-dialog>
									
									<el-dialog title="售后服务" :visible.sync="centerDialogVisible4"
										width="800px" center>
										 <iframe :src="FrameSrc"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = 
this.contentWindow.document.body.scrollWidth">
									</iframe> 
									</el-dialog>
									
								</div>

							</div>
						</div>


						<div class="tab-content p-0">
							<div class="bootstrap-table m-t-10">
								<div class="fixed-table-container overflow-x-auto">
											<table class="table table-bordered table-hover table-z" id="qlist_table">
												<thead>
													<tr>
														<th class="th-inner">
															<p>
																<a>编号</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a>主题</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a >对应客户</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a >服务类型</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a >服务方式</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a>开始时间</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center" >执行人</p>
														</th>
														<th class="th-inner">
															<p align="center">花费时间</p>
														</th>
														<th class="th-inner">
															<p align="center">
																<a class="na"  set-lan="html:状态">状态</a>
															</p>
														</th>
														<th class="th-inner">
															<p align="center">
															操作
															</p>
														</th>
													</tr>
												</thead>
												<tbody class="bg-white">
			                                     	<tr v-for="(service,i) in tableData">
														<td>
															<p align="center">{{ruleForm.totalCount-i-((ruleForm.currentPage-1)*6)}}</p>
														</td>
														<td>
															<p align="center">
																<a id="qlist_F3"><i class="fa fa-arrow-circle-right text-blue m-r-5"></i>
																{{service.ser_name}}</a>
															</p>
														</td>
														<td>
															<p align="center"><span style="font-weight:normal;color:#9e9e9e">〖</span>{{service.cus_name}}
																<a  :href="'/cusview?id=' + service.cus_id "><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span></p>
														</td>
														<td>
															<p align="center">{{service.type}}</p>
														</td>
														<td>
															<p align="center">{{service.modes}}</p>
														</td>
														<td>
															<p align="center">{{ dateFormat(service.ser_start)}}</p>
														</td>
														<td>
															<p align="center">{{service.use_name}}</p>
														</td>
														<td>
															<p align="center" v-if="service.ser_spendtime =='1'" >&nbsp;1个小时</p>
															<p align="center" v-else-if="service.ser_spendtime =='2'" >&nbsp;2个小时</p>
															<p align="center" v-else-if="service.ser_spendtime =='3'">&nbsp;3个小时</p>
															<p align="center" v-else-if="service.ser_spendtime =='12'">&nbsp;半个工作日</p>
															<p align="center" v-else-if="service.ser_spendtime =='24'">&nbsp;1个工作日</p>
															<p align="center" v-else-if="service.ser_spendtime =='48'">&nbsp;2个工作日</p>
															<p align="center" v-else-if="service.ser_spendtime =='49'">&nbsp;2个工作日以上</p>								
															<p align="center" v-else>&nbsp;</p>

															
														</td>
														<td>
												
															<p align="center">
															
															<i v-show="service.state ==='未处理'">&nbsp;&nbsp;</i>
															
															<i v-show="service.state ==='无需处理'"
															 data-toggle="tooltip" data-placement="bottom" data-title="未处理"
															 class="f-s-16 fa fa-exclamation text-warning"  :title="service.state"></i>
															
															<i  v-show="service.state ==='处理中'"
															 :title="service.state" class="f-s-16 fa fa-arrow-right text-primary" 
															 data-toggle="tooltip" data-title="处理中"
															data-placement="bottom"></i> 
															
															<i  v-show="service.state ==='处理完成'"
															 :title="service.state" data-toggle="tooltip" data-placement="bottom" data-title="处理完成" 
															class="f-s-16 fa fa-check text-custom" 
															></i>
														
															</p>
														</td>
														
														
												
														<td width="1%" nowrap="">
															<el-button type="text" @click="delgood(service.ser_id)" icon="el-icon-delete"></el-button>

															<!-- <el-dialog :visible.sync="centerDialogVisible3" width="30%" center>
																<span>确定要删除吗？</span>
																<span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="delgood(tousu.com_id)">确 定</el-button> 
  </span>
															</el-dialog>-->

															&nbsp;

															<el-button icon="el-icon-edit" type="text" @click="editRow(service.ser_id)"></el-button>
													
														</td>
													
												
													</tr>
											
												</tbody>
											</table>
										
								</div>
							</div>

							<div class="row m-t-10">
								<div class="col-sm-3">
									<!-- <el-button type="text" @click="centerDialogVisible1 = true"
										icon="el-icon-delete"> </el-button>
									<el-dialog :visible.sync="centerDialogVisible1" width="30%"
										center> <span>确定要删除吗？ </span> <span slot="footer"
										class="dialog-footer"> <el-button
											@click="centerDialogVisible1 = false">取消</el-button> <el-button
											type="primary" @click="centerDialogVisible1 = false">确定</el-button>
									</span> </el-dialog>

									&nbsp;

									<el-button icon="el-icon-edit" type="text"
										@click="centerDialogVisible2 =true"></el-button>

									<el-dialog :visible.sync="centerDialogVisible2" width="900px"
										center> </el-dialog> -->
								</div>

								<div class="col-sm-7">
								&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;
									<el-pagination 
										@size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="ruleForm.currentPage"
										:page-sizes="[10, 20, 30, 40]"
										:page-size="ruleForm.pagesize"
										layout="prev, pager, next, jumper"
										:total="ruleForm.totalCount"> </el-pagination>
								</div>

								<div class="col-sm-2 text-right"
									style="text-align: center !important; margin-top: 10px; font-size: 15px; font-weight: bold;">
									<span>售后服务</span> <small class="text-muted font-13">{{ruleForm.totalCount}}条</small>
								</div>
							</div>

						</div>
						</el-form>
					</div>
					<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible1: false,
							centerDialogVisible2: false,
							centerDialogVisible3: false,
							centerDialogVisible4: false,
							//表格当前页数据
			                tableData: [],
			                title:'',
			                FrameSrc:"",
							ruleForm: {
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize:6,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: 0,
						        }
						}
					},
					methods: {
						//从服务器读取数据
		                loadData: function(){  
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/afterSale/kehufuwu",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data.list;
								iosnn.ruleForm.totalCount = v.data.total;
								 console.info(v.data); 
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
						handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	  this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },
						submitForm(formName) {
					    	  this.loadData();
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						},
						 //   时间格式化
			         	dateFormat:function(time) {
							    var date=new Date(time);
							    var year=date.getFullYear();
							    /* 在日期格式中，月份是从0开始的，因此要加0
							     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
							     * */
							    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
							    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
							    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
							    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
							    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
							    // 拼接
							  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
							    return year+"-"+month+"-"+day;
							},
							delgood:function(id){
						    	  var r = confirm("您是否确认删除");
									if (r == true) {
										axios.post("/delService",
							           			//参数转换
							           			Qs.stringify({'id':id},{arrayFormat: 'brackets'})
							           			//ajax请求成功的回调函数
							           			).then(function(v){
								           			window.location.replace("/getServicety");
								           	}).catch(function(e){
								           		alert("出错了"+e);
								           	});
							        }
						      },
						      editRow(id){
						    	    this.centerDialogVisible4 = true;
									this.FrameSrc="/servicEditor?id="+id;
							},
							 init(){
       							//swal("维修完成！", "", "success");
    						}
					},
					
					mounted() {
						var iosnn=this;
						/*//post提交数据
						axios.post("/servicety",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							
							iosnn.tableData = v.data.list;
							
							iosnn.ruleForm.totalCount = v.data.total;
							
							//console.log(iosnn.tableData);
							 
						}).catch(function(e) {
							//alert("出错了"+e);
						});
						*/
						
						var list = ${servicetys};
						this.tableData = list.list;
						this.ruleForm.totalCount = list.total;

						console.log(list);
						
						//this.init();//判断类型是否为 维修
					}
					
				});
			</script>


				</div>
				<!----------------统计-------------------->
				<div>
					<div style="margin-top: 50px 0px 50px 50px;">
					<div id="container1" style="width: 25%; height: 400px;float: left;"></div>				
					<div id="container2" style="width: 40%; height: 400px;float: left;"></div>
					<div id="container3" style="width: 35%; height: 400px;float: right;"></div>
				</div>
				<script type="text/javascript">
				 	var servicemode = ${servicemode};
					
					
					var wei1 =[];
					for(var i = 0; i<servicemode.length;i++){
						wei1.push({name:servicemode[i].result,y:servicemode[i].count});	
					}
				// Make monochrome colors
					var pieColors = (function () {
					    var colors = [],
					        base = Highcharts.getOptions().colors[0],
					        i;
					
					    for (i = 0; i < 10; i += 1) {
					        // Start out with a darkened base color (negative brighten), and end
					        // up with a much brighter color
					        colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
					    }
					    return colors;
					}());
					
					// Build the chart
					Highcharts.chart('container1', {
					    chart: {
					        plotBackgroundColor: null,
					        plotBorderWidth: null,
					        plotShadow: false,
					        type: 'pie'
					    },
					    title: {
					        text: '服务方式分布'
					    },
					    tooltip: {
					        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					    },
					    plotOptions: {
					        pie: {
					            allowPointSelect: true,
					            cursor: 'pointer',
					            colors: pieColors,
					            dataLabels: {
					                enabled: true,
					                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
					                distance: -50,
					                filter: {
					                    property: 'percentage',
					                    operator: '>',
					                    value: 4
					                }
					            }
					        }
					    },
					    series: [{
					        name: '占比',
					        data:wei1
					    }]
					});
					
					//服务完成状态统计
					var servicecount = ${servicecount}
					var countname = [];
					var countvalue = [];
					for(var i = 0; i<servicecount.length;i++){
						
						countname.push(servicecount[i].date);
						countvalue.push(servicecount[i].count);	
					}
					Highcharts.chart('container3', {
				    chart: {
				        type: 'line'
				    },
				    title: {
				        text: '月度服务次数分布'
				    },
				    subtitle: {
				        text: ''
				    },
				    xAxis: {
				        categories:countname
				    },
				    yAxis: {
				        title: {
				            text: '服务次数 (次)'
				        }
				    },
				    plotOptions: {
				        line: {
				            dataLabels: {
				                enabled: true
				            },
				            enableMouseTracking: false
				        }
				    },
				    series: [{
				        name: '服务次数',
				        data: countvalue
				    }]
				});
					/* 
					Highcharts.chart('container2', {
							    chart: {
							        type: 'column'
							    },
							    title: {
							        text: '处理状况分布'
							    },
							    xAxis: {
							        categories: ['1月', '2月', '3月', '4月']
							    },
							    yAxis: {
							        min: 0,
							        title: {
							            text: 件'
							        },
							        stackLabels: {
							            enabled: true,
							            style: {
							                fontWeight: 'bold',
							                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
							            }
							        }
							    },
							    legend: {
							        align: 'right',
							        x: -30,
							        verticalAlign: 'top',
							        y: 25,
							        floating: true,
							        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
							        borderColor: '#CCC',
							        borderWidth: 1,
							        shadow: false
							    },
							    tooltip: {
							        headerFormat: '<b>{point.x}</b><br/>',
							        pointFormat: '{series.name}: {point.y}元<br/>总和: {point.stackTotal}元',
							        exporting: { enabled: false },//隐藏导出图片
							        credits: { enabled: false }
							    },
							    plotOptions: {
							        column: {
							            stacking: 'normal',
							            dataLabels: {
							                enabled: true,
							                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
							            }
							        }
							    },
							    series: [{
							        name: '无需处理',
							        data: [200, 320, 442, 730]
							    }, {
							        name: '未处理',
							        data: [221, 200, 356, 245]
							    }, {
							        name: '处理中',
							        data: [320, 452, 450, 255]
							    }, {
							        name: '已完成',
							        data: [322, 410, 410, 210]
							    }]
							}); */
					</script>
				</div>
			</div>
		</div>
	</div>
	

</body>

</html>
